<template>
  <div class="amap-page-container">
    <!-- <el-tooltip content="Top center" placement="top">
       <img height="25" width="25" src= "/static/img/camera.png" @click="openVideo()">
    </el-tooltip> -->
    <!-- <el-amap
      vid="amap"
      :zoom="zoom"
      class="amap-demo"
      defaultCursor="pointer"
      style="width:90%;margin-left:5%;"
      :center="center"
      :amapManager="amapManager"
      :events="events"
      :plugin = "plugin"
      >
      <el-amap-marker vid="component-marker" :position='clickPosition'></el-amap-marker>
    </el-amap> -->
    <el-amap
        vid="amapDemo1"
        :center="center"
        :zoom="zoom"
        class="amap-demo">
        <el-amap-marker v-for="marker in markers" :key="marker.position" :position="marker.position" :template="marker.template"></el-amap-marker>
      </el-amap>
</div>
</template>

<script>
import VueAMap from "vue-amap";
import { AMapManager } from "vue-amap";
VueAMap.initAMapApiLoader({
  key: "f23e97a7ad0f22dedbe907e89405c3f8",
  plugin: [
    "AMap.Scale",
    "AMap.OverView",
    "AMap.AMapManager",
    "AMap.ToolBar",
    "AMap.MapType",
    "Geocoder",
    "AMap.PlaceSearch",
    "AMap.Geolocation"
  ],
  uiVersion: "1.0.11" // 版本号
});
let amapManager = new AMapManager();
let infoWindow;
export default {
  props: {
    dataForm: Object,
    regionAllName: String
  },
  data() {
    let vm = this;
    return {
      // imgurl:'./static/img/camera.png',
      imgurl:window.SITE_CONFIG.cdnUrl + "/static/img/camera.png", // 打包的话放出来
      dataList: [],
      markers: [],
      markerRefs: [],
      visible: false,
      zoom: 19,
      center: [106.748648, 26.563406],
      result: [],
      address: "",
      radius: 300,
      clickPosition: [106.748648, 26.563406],
      amapManager,
      map: null,
      longitude: 106.748648,
      latitude: 26.563406,
      poiPicker: null,
      events: {
        init(o) {
          vm.map = o;
        },
        click: e => {
          //点击事件
          // vm.dataForm.longitude = e.lnglat.lng
          // vm.dataForm.latitude = e.lnglat.lat
          // vm.clickPosition = [e.lnglat.lng,e.lnglat.lat]
          // vm.getAddressName([e.lnglat.lng ,e.lnglat.lat]);
        }
      },
      plugin: [
        "ToolBar",
        {
          pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {}
          }
        },
        {
          pName: "Scale",
          events: {
            init(instance) {}
          }
        },
        {
          pName: "Geolocation",
          buttonPosition: "RB",
          events: {
            init(o) {
              vm.map = o;
              // o 是高德地图定位插件实例
              // o.getCurrentPosition((status, result) => {
              //   if (result && result.position) {
              //     vm.zoom = 16
              //     vm.center = [result.position.lng, result.position.lat];
              //     // self.loaded = true;
              //     vm.$nextTick();
              //   }
              // });
            }
          }
        }
      ]
    };
  },
  watch: {
    map: function() {
      if (this.map != null) {
        //this.initSearch();
      }
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    init(communityId) {
      // 获取改小区下所有设备
      this.$http({
        url: `/dg-ic/ic/device/alllist`,
        method: "get",
        params: this.$http.adornParams({
          housingEstateId:
            sessionStorage.getItem("thiscommunityId") === "null"
              ? communityId
              : sessionStorage.getItem("thiscommunityId")
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.data;
          this.global.setdataList(this.dataList);
          for(let i = 0; i < this.dataList.length; i++){
            if(this.dataList[i].longitude!=null && this.dataList[i].longitude.trim()!=="" && this.dataList[i].latitude!=null && this.dataList[i].latitude.trim()!=="" ) {
              this.center = [this.dataList[i].longitude, this.dataList[i].latitude]
              break;
            }
          }
          // this.center = [this.dataList[0].longitude, this.dataList[0].latitude]
          // 显示数据在地图上
          // let self = this;
          let markers = [];
          let index = 0;
          // let basePosition = [106.748648, 26.563406];
          // let num = 10;
          for (let i = 0; i < this.dataList.length; i++) {
             if(this.dataList[i].longitude!=null && this.dataList[i].longitude.trim()!=="" && this.dataList[i].latitude!=null && this.dataList[i].latitude.trim()!=="" ) {
              markers.push({
              position: [this.dataList[i].longitude, this.dataList[i].latitude],
              // template: `<el-button  type="primary" size="mini" @click="openVideo(${this.dataList[i].name})"> ${this.dataList[i].name}</el-button>`
              template: `<el-tooltip content=" ${this.dataList[i].name}" placement="top">
       <img height="25" width="25" src=`+ this.imgurl +` @click="openVideo(${i})">
    </el-tooltip>`
            });
             }

          }
          this.markers = markers;
        }
      });
    },
    openVideo(row) {
      alert("cs端展示视频");
      // 具体方法。。。
    }
  }
};
</script>

<style scoped>
.amap-page-container {
  height: 500px;
  width: 100%;
  position: relative;
  margin-bottom: 30px;
}
.search-box {
  position: absolute;
  z-index: 5;
  width: 90%;
  left: 5%;
  top: 10px;
  height: 30px;
}
.tip-box {
  width: 60%;
  max-height: 300px;
  margin-top: 10px;
  margin-left: 18%;
  z-index: 5;
  position: absolute;
  top: 30px;
  overflow-y: auto;
  background-color: #fff;
}
</style>
